<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        *{margin: 0;padding: 0;}
        #box1{width: 600px;height: 200px; border: 1px gray solid;border-radius: 5px;margin: 10px;
            position: relative;overflow: hidden;float: left;}
        #box1 .shang{height: 60px;border-bottom: 1px gray dashed;margin: 10px;position: relative;}
        #box1 .shang img{float: left;position: absolute; height: 40px;width: 40px;bottom: 5px;}
        #box1 .shang h1{display: inline;position: absolute;color: blue;left: 40px;
            bottom: 10px;font-size: 16px;float: left;}
        #box1 .shang span{position: absolute;right: 50px;color: gray;bottom: 15px;}
        #box1 .shang i{font-size: 20px;padding: 10px;bottom: 5px;}
        #box1 .shang i.icon-trash{color: gray;position: absolute;right: 10px;}
        #box1 .shang i.icon-bianji{color: rgb(40, 87, 241);position: absolute;right: 51px;}
        #box1 p{color: gray;margin: 20px 10px;}
        #box1 .one{background: green;width: 120px;height: 30px;bottom: 15px;right: -27px;position: absolute;
            margin: 0;transform: rotate(-45deg);color: white;text-align: center;font-size: 16px;line-height: 30px;}

        #box2{width: 600px;height: 200px; border: 1px gray solid;border-radius: 5px;margin: 10px;
            position: relative;overflow: hidden;float: left;}
        #box2 .shang{height: 60px;border-bottom: 1px gray dashed;margin: 10px;position: relative;}
        #box2 .shang img{float: left;position: absolute; height: 40px;width: 40px;bottom: 5px;}
        #box2 .shang h1{display: inline;position: absolute;color: blue;left: 40px;
            bottom: 10px;font-size: 16px;float: left;}
        #box2 p{color: gray;margin: 20px 10px;}
        #box2 .one{background: gray;width: 120px;height: 30px;bottom: 15px;right: -27px;position: absolute;
            margin: 0;transform: rotate(-45deg);color: white;text-align: center;font-size: 16px;line-height: 30px;}
    </style>
</head>
<body>
    <div class="box">
        <div id="box1">
            <div class="shang">
                <img src="./img/3.png" alt="">
                <h1>zk-1</h1>
                <i class="iconfont icon-bianji"></i>
                <span>|</span>
                <i class="iconfont icon-trash"></i>
            </div>
            <p class="one">已绑定</p>
            <p>地址：xxxx</p>
            <p>创建时间：xxxx</p>
        </div>
        <div id="box2">
            <div class="shang">
                <img src="./img/3.png" alt="">
                <h1>Redis</h1>
            </div>
            <p class="one">未绑定</p>
        </div>
    </div>
</body>
</html>